<template>
  <div class="ff-regular">
    <Modal v-model="msgPop" width="600" class-name="vertical-center-modal" :closable="false" :mask-closable="false">
      <!-- 页头 -->
      <div slot="header" class="head-sty">
        <div class="title ff-bold">{{ $t('order.msg_btn_text') }}</div>
      </div>
      <!-- 内容 -->
      <div class="content-wrap">
        <div class="info-list" v-for="(item, index) in msgInfo" :key="index">
          <div class="top-sty">
            <div class="dot">
              <div class="bg"></div>
            </div>
            <div class="time">{{ item.createTime }}</div>
          </div>
          <div class="content-sty" :style="index === msgInfo.length - 1 ? { border: 'none' } : {}">
            <div class="info">
              <div class="info-text" v-html="item.remark"></div>
              <div v-if="item.remarkImages && item.remarkImages.length > 0">
                <img v-for="(v, i) in item.remarkImages" :key="i" :src="v" class="img-sty"
                  @click="lookMet(i, item.remarkImages)" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div slot="footer" class="footer-wrap">
        <div class="cancel-btn ff-bold" @click="closeMet()">{{ $t('user.cancel') }}</div>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    msgInfo: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      msgPop: false,
      uploadLoading: false
    }
  },
  methods: {
    open() {
      this.msgPop = true;
    },
    closeMet() {
      this.msgPop = false;
    },
    lookMet(index, images) {
      this.$viewerApi({
        images: images,
        options: {
          initialViewIndex: index,
        },
      });
    },
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-content) {
  border-radius: 12px;

  .ivu-modal-header {
    border: none;
    padding: 32px 24px 26px 32px;
  }

  .ivu-modal-body {
    height: 260px;
    padding: 0 32px;
  }

  .ivu-modal-footer {
    border: none;
    padding: 32px;
  }
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .head-sty {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-weight: 600;
      font-size: 24px;
      color: #1E1714;
      line-height: 28px;
    }
  }

  .content-wrap {
    min-height: 260px;
    height: 260px;
    overflow: auto;

    .info-list {
      .top-sty {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .dot {
          width: 18px;
          height: 18px;
          background-color: #FFE9F1;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;

          .bg {
            width: 10px;
            height: 10px;
            background: #FF186B;
            border-radius: 50%;
          }
        }

        .time {
          font-weight: 400;
          font-size: 16px;
          color: #AEB0B9;
          line-height: 16px;
          margin-left: 23px;
        }
      }

      .content-sty {
        min-height: 32px;
        padding-left: 32px;
        margin-left: 8px;
        border-left: 2px dashed #DDDFE6;

        .line-sty {
          width: 1px;
          height: 100%;
          border: 1px dashed #DDDFE6;
        }

        .info {
          .info-text {
            font-weight: 400;
            font-size: 16px;
            color: #767B93;
            line-height: 20px;
            margin-bottom: 8px;

            :deep(b) {
              color: #FF186B;
            }
          }

          .img-sty {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            cursor: pointer;
          }
        }
      }
    }
  }

  .content-wrap::-webkit-scrollbar-thumb {
    background: #E6E8ED;
  }

  .content-wrap::-webkit-scrollbar-track {
    background: #F5F6FA;
  }

  .footer-wrap {
    display: flex;
    justify-content: end;
    gap: 20px;

    .cancel-btn {
      min-width: 112px;
      height: 46px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #DCDFE6;
      font-weight: 600;
      font-size: 16px;
      color: #1E1714;
      line-height: 19px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
